/*
Зависимости:
JQuery 1.2+ с плагином Dimensions

Настройка скрипта:
Для добавления основных категорий, вызываем функцию addCategory(), в параметрах которой передаем id категории и заголовок
Например - addCategory(1, 'категория № 1');
Также создаем и подкатегории, но функцией addSubCategory(). Параметры у неё таковы: id родительской категории, Имя ссылки, ссылка
Пример: addSubCategory(1, 'подкатегория1', 'http://example.com');
Опосля всех этих манипуляций, запускаем initMenu(), единственный параметр функции - id контейнера, куда вставляем меню

Внешний вид меню настраивается в CSS,
Имена селекторов:
Для категорий: .menuMainCat
Для подкатегорий: .menuSubCat
Для ссылок: .menuSubCat a
*/

var mouseX = 1;
var mouseY = 1;
var menuCategories = Array();
var menuSubCategories = Array();

document.onmousemove = setCoord;

function setCoord(event){
if(window.event){
var X = window.event.x;
var Y = window.event.y;
}
else{
var X = event.clientX;
var Y = event.clientY;
}
mouseX = X;
mouseY = Y;
}

function showMenu(id){
var Offset = $('#menuMainCat'+id).offset();
var Height = $('#menuMainCat'+id).height();
var Width = $('#menuMainCat'+id).width();
Width+=20;//padding
$('div.menuSubs').css('display', 'none')
var SubWidth = $('#menuSubs'+id).width();
if(SubWidth < Width) SubWidth = Width;
$('#menuSubs'+id).css('top', Offset.top+Height+10).css('left', Offset.left).css('width', SubWidth).animate({height:'show'}, 300);
setTimeout('checkOut('+id+')', 400)
}

function hideMenu(id){
$('#menuSubs'+id).css('display', 'none')
}

function checkOut(id){
var menuP = $('#menuSubs'+id).offset();
var menuH = $('#menuSubs'+id).height();
var menuW = $('#menuSubs'+id).width();
var scrollT = $('body').scrollTop();
if(mouseX<menuP.left || mouseX>(menuP.left+menuW) || mouseY+70<(menuP.top-scrollT) || mouseY>(menuP.top-scrollT+menuH)) hideMenu(id);
else setTimeout('checkOut('+id+')',100);
}

function addCategory(Id, Name, Href, OnClick){
var catLength = menuCategories.length;
menuCategories.splice(catLength, 0, Array(Id, Name, Href, OnClick));
}

function addSubCategory(Id, Name, Href, OnClick){
var catLength = menuSubCategories.length;
menuSubCategories.splice(catLength, 0, Array(Id, Name, Href, OnClick));
}

function initMenu(id){
$(document).ready(function(){
$('div.menu', 'body').remove()

var catsLength = menuCategories.length;
var subCatsLength = menuSubCategories.length;

for(var i = 0; i < catsLength; ++i){
$('<td style="background:url(/images/mbg.gif); padding:0 5px 0 5px; cursor:hand; cursor:pointer" nowrap class="tm" id="menuMainCat'+menuCategories[i][0]+'" onmouseover="showMenu('+menuCategories[i][0]+')" onclick="location.href=\''+menuCategories[i][2]+'\'">'+menuCategories[i][1]+'</td><td width="8"><img src="/images/000.gif" width="8" height="24"></td>').appendTo('#'+id);
$('<div class="menuSubs" id="menuSubs'+menuCategories[i][0]+'"></div>').appendTo('#subsplace');
}

for(var i = 0; i < subCatsLength; ++i){
$('<div class="menuSubCat menu"><a href="'+menuSubCategories[i][2]+'">'+menuSubCategories[i][1]+'</a></div>').appendTo('#menuSubs'+menuSubCategories[i][0])
}
});
}

// здесь настраиваем

addCategory(1100, 'Главная', '/');

addCategory(11, 'Новости', '/content/11')
addCategory(12, 'Обучение', '/content/12')
addCategory(13, 'Библиотека', '/content/13')
addSubCategory(2, '1', '/content/5')
addSubCategory(2, '2', '/content/6')

addCategory(1101, 'Журнал "Массаж. Эстетика тела"', 'http://www.massagemag.ru/')

initMenu('menuplace')